<template>
  <div style="width: 100%">
    <div
      class="fruit_list"
      :class="{ active: isThird }"
    >
      <!-- <div class="cate"> -->
      <div
        v-for="cate in goodsList"
        :key="cate.pid"
        class="cate-item"
        @click="goDetail(cate)"
      >
        <div class="huodong_div">
          <img
            :src="cate.defaultAlbum"
            alt=""
            class="goods-img"
          >
         <!-- <div
            v-if="cate.promotionTags.length > 0"
            class="huodong"
          >
            <div class="leftBox">
              {{ cate.promotionTags[0] }}
              <span>￥</span>
              {{ cate.fSalePrice }}起
            </div>
            <div class="rightBox">
							限180件仅剩3小时
						</div>
          </div> -->
        </div>
        <div class="fruit_detail">
          <div>
            <div class="title">
              {{ cate.pName }}
            </div>
            <div>
              <span class="money">￥</span>
              <span class="price">{{ cate.fSalePrice }}</span>
              <span class="haspay">{{ cate.iSales }}人已付款</span>
            </div>
          </div>
          <img
            :src="cate.isZanStatus == 1 ? iszanImg : zanImg"
            alt=""
            @click="zan(cate)"
          >
        </div>
      </div>
      <!-- </div> -->
    </div>
    <div
      class="more"
      @click="getMore"
    >
      点击加载更多+
    </div>
  </div>
</template>

<script>
import defaultImg from "../../assets/img/tao.png";
import activeImg from "../../assets/img/classify2.png";
import zanImg from "../../assets/img/zan.png";
import iszanImg from "../../assets/img/zan_selected.png";
export default {
  name: "",
  components: {},
  props: ["isThird"],
  data() {
    return {
      zanImg: zanImg,
      iszanImg: iszanImg,
      isZan: false,
      zanList: [],
      goodsList: [],
      cateData: [
        {
          img: defaultImg,
          name: "优鲜水果",
          id: 1,
          isActive: true,
          isZanStatus: 0,
        },
        {
          img: defaultImg,
          name: "优鲜水果",
          id: 2,
          isActive: false,
          isZanStatus: 0,
        },
        {
          img: defaultImg,
          name: "优鲜水果",
          id: 3,
          isActive: false,
          isZanStatus: 0,
        },
        {
          img: defaultImg,
          name: "优鲜水果",
          id: 4,
          isActive: false,
          isZanStatus: 0,
        },
        {
          img: defaultImg,
          name: "优鲜水果",
          id: 5,
          isActive: false,
          isZanStatus: 0,
        },
        {
          img: defaultImg,
          name: "优鲜水果",
          id: 6,
          isActive: true,
          isZanStatus: 0,
        },
        {
          img: defaultImg,
          name: "优鲜水果",
          id: 7,
          isActive: false,
          isZanStatus: 0,
        },
      ],
      classifyId: "",
      keywords: "",
      page: 1,
      type: "",
      activityid: "",
      order: "iOrder",
    };
  },
  created() {
    this.type = this.$route.query.type;
    this.activityid = this.$route.query.activityid;
    this.getList("", "", 1);
  },
  methods: {
    over(item) {
      this.$set(item, "img", activeImg);
    },
    leave(item) {
      this.$set(item, "img", defaultImg);
    },
    zan(item) {
      this.isZan = !this.isZan;
      if (item.isZanStatus == 0) {
        this.$set(item, "isZanStatus", 1);
        this.zanList.push(item.id);
        console.log(item.id);
      } else {
        this.$set(item, "isZanStatus", 0);
        let index = this.zanList.indexOf(item.id);
        this.zanList.splice(index, 1);
      }
      console.log(this.zanList);
      // this.$emit('zan',item.id)
    },
    //跳转商品详情
    goDetail(item) {
      this.$router.push({
        path: "/fruit/detail",
        query: {
          id: item.pid,
          iShopId: item.iShopId
        },
      });
    },
    getList(classifyId, keywords, page) {
      if (page == 1) {
        this.goodsList = [];
      }
      this.classifyId = classifyId;
      this.keywords = keywords;
      this.page = page;
      let data = {
        queryCondition: {
          order: [
            {
              fieldname: this.order,
              direction: "asc",
            },
          ],
          pageindex: this.page,
          pagesize: 16,
          where: [
            {
              fieldname: "categoryid",
              valuefrom: this.classifyId,
            },
            {
              fieldname: "keyword",
              valuefrom: this.keywords,
            },
          ],
        },
      };
      if (this.type) {
        console.log(this.type);
        let head = "";
        if (this.type == 1) {
          head = "PP";
        }
        if (this.type == 3) {
          head = "GP";
        }
        if (this.type == 7) {
          head = "TP";
        }
        if (this.type == 11) {
          head = "HP";
        }
        if (this.type == 2) {
          head = "GB";
        }
        data.queryCondition.where.push({
          fieldname: "promotionActivityId",
          valuefrom: head + this.activityid,
        });
      }
      this.$api.home.getProductList(data).then((res) => {
        if (res.code == 200) {
          this.goodsList = this.goodsList.concat(res.data.data);
        }
      });
    },
    getMore() {
      this.page++;
      this.getList(this.classifyId, this.keywords, this.page);
    },
    setType(value) {
      this.order = value;
      this.page = 1;
      this.getList(this.classifyId, this.keywords, this.page);
    },
  },
};
</script>

<style scoped lang="scss">
.fruit_list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;

  .cate-item {
    width: 23%;
    height: 28.13rem;
    background: rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    margin-bottom: 1.88rem;
    margin-right: 1.59rem;

    &:nth-child(4n) {
      margin-right: 0;
    }

    &:hover {
      -webkit-box-shadow: 0px 3px 10px #c8c8c8;
      -moz-box-shadow: 0px 3px 10px #c8c8c8;
      box-shadow: 0px 3px 10px #c8c8c8;
    }

    div.huodong_div {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 100%;
      height: 20.63rem;

      .goods-img {
        width: 15.5rem;
        height: 15.5rem;
        object-fit: contain;
      }

      .huodong {
        // width: 14.5rem;
        height: 3.56rem;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9;
        background: url(../../assets/img/fruit_huodong.png) no-repeat left top;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        padding: 0 2.5rem 0 2.15rem;

        .leftBox {
          width: 4.5rem;
          height: 2.44rem;
          font-size: 1.13rem;
          line-height: 1.39rem;

          > span {
            font-size: 0.8rem;
          }
        }

        .rightBox {
          font-size: 1rem;
          line-height: 1.95rem;
        }
      }
    }

    .fruit_detail {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.75rem 3.25rem 1.94rem;

      // width: 17.01rem;
      img {
        width: 1.5rem;
        height: 1.37rem;
      }

      .title {
        font-size: 1.38rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(68, 68, 68, 1);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-bottom: 0.5rem;
        max-width: 13rem;
      }

      .money {
        font-size: 0.8rem;
        color: #f03f6e;
      }

      .price {
        color: #f03f6e;
        font-size: 1.37rem;
        margin-right: 0.44rem;
      }

      .haspay {
        font-size: 1rem;
        color: #999;
      }
    }
  }
}

.more {
  font-size: 1rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 1.95rem;
  text-align: center;
  margin: 3.13rem auto;
  cursor: pointer;
}
</style>
